<template>
    <div class="subpage feed-back-container">
        <textarea class="feed-back-content" placeholder="请填写您对平台的反馈意见，长度10-300字。" maxlength="300" v-model="feedBackText"></textarea>
        <div class="feed-back-phone">
            <span>手机号</span>
            <input type="tel" placeholder="填写联系方式（非必填）" maxlength="11" v-model="phone">
        </div>
        <van-button round class="u-btn-default u-bg-gradient-light" @click="submitFn">确定</van-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            feedBackText: '',
            phone: ''
        }
    },
    methods: {
        submitFn() {
            if(!this.$tool.validator.isEmpty(this.feedBackText)){
                this.$tool.toast('反馈意见不能为空')
                return
            }
            if(this.feedBackText.length < 10){
                this.$tool.toast('反馈意见最少10个字')
                return
            }
            if(!this.$tool.validator.isSpecialText(this.feedBackText)){
                this.$tool.toast('反馈意见中不能包含特殊字符')
                return
            }
            if(this.phone){
                if(!this.$tool.validator.isMobilePhone(this.phone)){
                    this.$tool.toast('请填写正确的手机号')
                    return
                }
            }

            this.submitAjax()
        },
        submitAjax() {
            console.log('提交意见')
            let postData = {
                content: this.feedBackText,
                mobile: this.phone
            }
            this.$api.post('/api/feedback/add', postData)
                .then((res) => {
                    this.$tool.toast('感谢您的反馈建议')
                    this.feedBackText = ''
                    this.phone = ''
                })
        }
    }
}
</script>

<style lang="scss" scoped>
    .feed-back-container {
        width: 100%;
        padding: 10px 16px;
        box-sizing: border-box;
        .feed-back-content {
            width: 100%;
            height: 118px;
            line-height: 18px;
            margin-bottom: 16px;
            padding: 14px 16px;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 4px;
            border: none;
            resize: none;
        }
        .feed-back-phone {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 48px;
            font-size: 14px;
            margin-bottom: 32px;
            padding: 0 16px;
            box-sizing: border-box;
            border-radius: 4px;
            border: none;
            background-color: #fff;
            span {
                display: block;
                width: 58px;
            }
            input {
                flex: 1;
                padding: 0;
                font-size: 14px;
                outline: none;
                border: none;
                border-radius: 0;
                background-color: #fff;
            }
        }
    }
</style>